<template>
    <VCalendarDatePicker
        v-if="
            date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end
        "
        v-model.range="date"
        :columns="2"
        v-bind="{ ...attrs, ...$attrs }"
        @dayclick="onDayClick"
    />
    <VCalendarDatePicker
        v-else
        v-model="date"
        v-bind="{ ...attrs, ...$attrs }"
        @dayclick="onDayClick"
    />
</template>

<script setup lang="ts">
import 'v-calendar/dist/style.css';

import { DatePicker as VCalendarDatePicker } from 'v-calendar';

defineOptions({
    inheritAttrs: false,
});

const props = defineProps({
    modelValue: {
        type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
        default: null,
    },
});

const emit = defineEmits(['update:model-value', 'close']);

const date = computed({
    get: () => props.modelValue,
    set: (value) => {
        emit('update:model-value', value);
        emit('close');
    },
});

const attrs = {
    transparent: true,
    borderless: true,
    color: 'primary',
    'is-dark': { selector: 'html', darkClass: 'dark' },
    'first-day-of-week': 2,
};

function onDayClick(_: any, event: MouseEvent): void {
    const target = event.target as HTMLElement;
    target.blur();
}
</script>

<style>
:root {
    --vc-gray-50: rgb(var(--color-gray-50));
    --vc-gray-100: rgb(var(--color-gray-100));
    --vc-gray-200: rgb(var(--color-gray-200));
    --vc-gray-300: rgb(var(--color-gray-300));
    --vc-gray-400: rgb(var(--color-gray-400));
    --vc-gray-500: rgb(var(--color-gray-500));
    --vc-gray-600: rgb(var(--color-gray-600));
    --vc-gray-700: rgb(var(--color-gray-700));
    --vc-gray-800: rgb(var(--color-gray-800));
    --vc-gray-900: rgb(var(--color-gray-900));
}

.vc-primary {
    --vc-accent-50: rgb(var(--color-primary-50));
    --vc-accent-100: rgb(var(--color-primary-100));
    --vc-accent-200: rgb(var(--color-primary-200));
    --vc-accent-300: rgb(var(--color-primary-300));
    --vc-accent-400: rgb(var(--color-primary-400));
    --vc-accent-500: rgb(var(--color-primary-500));
    --vc-accent-600: rgb(var(--color-primary-600));
    --vc-accent-700: rgb(var(--color-primary-700));
    --vc-accent-800: rgb(var(--color-primary-800));
    --vc-accent-900: rgb(var(--color-primary-900));
}
</style>
